*{ /* la estrella es un atributo
  override cualquier cosa en el documento.
  lo que esté referenciado a esta estrella será
  a todos los elementos del html.*/
  box-sizing: border-box;
}

img{max-width: 1080px;}

video {
  max-width: 100%;
  height: auto;
}

/* links*/

a{
  color: inherit;
  text-decoration: underline;
  cursor: crosshair;
}

a:hover {
  color:lightblue;
 background-color: none;
  text-decoration-line: line-through;
  cursor: crosshair;
}

a:active {
  color: lightblue;
cursor: crosshair;}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 36px;
}

p {margin: 10px;

}

.nombre{
  position: relative;
font-size: 10pt;
line-height: 1.5;
position: absolute;
max-width: 18%;
margin-top: .1%;
float: left;
z-index: 0;}

.año{
  position: relative;
font-size: 10pt;
line-height: 1.5;
position: relative;
width: 20%;
margin-top: .1%;
float: right;
text-align: right;
z-index: 0;}

#headervoladorcentro{color: white;
  top: 3%;
  font-size: 1em;
  position: relative;
  clear: both;
text-align: center;
font-weight: bold;
margin: auto;
width: 100%;
position: fixed;
z-index: 0;
}

/* cuerpo*/

hr{max-width: 50%;
margin-left: 1%;
border: .1px solid white;
opacity: 10%;}


body {
  font-size: 12pt;
  line-height: 1.5;
  overflow: auto;
  text-align: left;
  font-family:sans-serif;
  font-style: normal;
 background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
background-color: purple;
color: snow;
}

button {padding: 0;
border: none;
background: none;
font-weight: bold;}

/* Style del botón que abre y cierra el colapsado*/
.collapsible {
  background-color: transparent;
  color: peachpuff;
  cursor: help;
  padding: 18px;
  text-align: left;
  font-size: 36px;
  top: 1%;
  left: 1%;
  transform: translateX(-5%);
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  z-index: 99;}

  /*background-image: url(MDfavicon.png);*/


* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: blue;}


/* Style del menú colapsado. Nota: configurado par no estár desplegado siempre */
/* diferentes configuraciones del colapsado para jugar ocn el color de fondo del background */
/* fondo verde */
.content0 {
  width: 30%;
  font-size: 22pt;
  text-align: center;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  overflow: hidden;
  padding: 18px;
  background-color: red;
  opacity: 80%;
  color: blanchedalmond;
  z-index: 99;
}



/* Style del botón que abre y cierra el colapsado de las categorías*/
.collapsible2 {
  position: relative;
  right: 0;
  background-color: transparent;
  color: darkgrey;
  max-width: 100%;
  left: 85%;
  cursor: help;
  padding-top:0px;
  padding-bottom: 0px;
  padding-right: 2%;
  text-align: right;
  font-size: 1em;
  top: 3%;
  position: fixed;
  z-index: 99;}


* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: blue;}


/* Style del menú colapsado. Nota: configurado par no estár desplegado siempre */
/* diferentes configuraciones del colapsado para jugar ocn el color de fondo del background */
.content00 {
  width: 30%;
  font-size: 1em;
  line-height: 2;
  text-align: left;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  overflow: hidden;
  padding: 18px;
  background-color: red;
  opacity: 80%;
  color: blanchedalmond;
  z-index: 2;
}


.container1{
  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr;
  grid-template-areas:
                       "hueco hueco hueco hueco hueco hueco hueco hueco"
                       "columna1 columna1 columna2 columna2 columna3 columna3 columna4 columna4"
                       "columna5 columna5 columna6 columna6 columna7 columna7 columna8 columna8"
                       "columna9 columna9 columna10 columna10 columna11 columna11 columna12 columna12"
                       "columna13 columna13 columna14 columna14 columna15 columna15 columna16 columna16"
                       "columna17 columna17 columna18 columna18 columna19 columna19 columna20 columna20";

  grid-gap: 2rem;
  row-gap: 3rem;
  margin-left: 3.5%;
  margin-right: 3.5%;
}


#categs{color: snow;
  font-size: 14pt;
  line-height: 1.5;
  text-align: right;
  padding-right: 1%;
  padding-bottom: 3%;
}


#tituloproy{
  background-color: green;
  position: fixed;
  grid-area: tituloproy;
}

  #hueco{
 background-color: transparent;
  grid-area: hueco;
}

#columna1{
 background-color: transparent;
  grid-area: columna1;
}

#columna2{
  background-color: transparent;
  grid-area: columna2;
}


#columna3{
  background-color: transparent;
  grid-area: columna3;
}

#columna4{
  background-color: transparent;
  grid-area: columna4;
}

#columna5{
 background-color: transparent;
  grid-area: columna5;
}

#columna6{
  background-color: transparent;
  grid-area: columna6;
}


#columna7{
  background-color: transparent;
  grid-area: columna7;
}

#columna8{
  background-color: transparent;
  grid-area: columna8;
}

#columna9{
  background-color: transparent;
  grid-area: columna9;
}

#columna10{
  background-color: transparent;
  grid-area: columna10;
}

#columna11{
  background-color: transparent;
  grid-area: columna11;
}

#columna12{
  background-color: transparent;
  grid-area: columna12;
}

#columna13{
  background-color: transparent;
  grid-area: columna13;
}

#columna14{
  background-color: transparent;
  grid-area: columna14;
}

#columna15{
  background-color: transparent;
  grid-area: columna15;
}

#columna16{
  background-color: transparent;
  grid-area: columna16;
}

#columna17{
  background-color: transparent;
  grid-area: columna17;
}

#columna18{
  background-color: transparent;
  grid-area: columna18;
}

#columna19{
  background-color: transparent;
  grid-area: columna19;
}


#espaciofotos{
  text-align: center;
  align-content: center;
  /*background-color: grey;*/
  padding-bottom: 35px;
  grid-area: espaciofotos;
}

#piefoto{
  color: blanchedalmond;
  padding: 7px;
  font-size: 10pt;
  text-align: left;
}

.container2{

  display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:  1fr 1fr 1fr 1fr 1fr 1fr;

  grid-template-areas: "bloisua sdñajslñda vksdhvskd siofajjs cjhdsf asjhask skjdhakjsd oijiuagsd"
                       "ñlñlk fichatecesp fichatecesp fichatecesp fichateceng fichateceng fichateceng jskjl"
                       "dlajsldsa descripciónesp descripciónesp descripciónesp  descripcióneng descripcióneng descripcióneng kjfkjsdhj"
                       "hdkash espaciofotos espaciofotos espaciofotos espaciofotos espaciofotos espaciofotos lkasjdla";


  grid-gap: .5rem;


}


#fichatecesp{
  margin-top: 10%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  grid-area: fichatecesp;
  color: whitesmoke;
}
#fichateceng{
  margin-top: 10%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  color: darkgrey;
  grid-area: fichateceng;
}

#descripciónesp{
  font-size: 14pt;
  max-width: 75%;
  font-family: serif;
  background-color: transparent;
  grid-area: descripciónesp;
  text-align: left;
color: blanchedalmond;}

#descripcióneng{
  font-size: 14pt;
  max-width: 75%;
  background-color: transparent;
 font-family: serif;
  color: azure;
  grid-area: descripcióneng;}

#espaciofotos{
  background-color: transparent;
  align-content: center;
  grid-area: espaciofotos;
  margin-right: 0px;
  height: 100%;
}
#espaciofotos2{
  color: pink;
  background-color: transparent;
  align-content: center;
  grid-area: espaciofotos2;
  margin-right: 0px;
}
  #contenidoadicional{
  background-color: transparent;
  grid-area: contenidoadicional;
}

#piedefoto{
  color: black;
  margin-top: 0px;
  margin-bottom: 2px;
  font-size: 14pt;
}

#fichatecespv2{
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  color: whitesmoke;
  float: left;
  width: 50%;
  padding-right: 15%;
}
#fichatecengv2{
  margin-top: 3%;
  margin-bottom: 3%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  color: darkgrey;
  padding-right: 15%;
}

@media (max-width: 1080px){

  .content0 {
    width: 60%;
  }

  .content00 {
    width: 60%;
  }

  .container1{
    display:grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:  .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr .01fr;
    grid-template-areas:
                         "hueco hueco hueco hueco hueco hueco"
                         "columna1 columna1 columna2 columna2 columna3 columna3"
                         " columna4 columna4 columna5 columna5 columna6 columna6"
                         "columna7 columna7 columna8 columna8 columna9 columna9"
                         "columna10 columna10 columna11 columna11 columna12 columna12"
                         "columna13 columna13 columna14 columna14 columna15 columna15"
                         "columna16 columna16 columna17 columna17 columna18 columna18"
                         "columna19 columna19 columna20 columna20 columna21 columna21";

    grid-gap: 1.5rem;
    row-gap: 4rem;
  }



  .container2{
    display:grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows:  .4fr 1fr 1fr 1fr 1fr;
  grid-template-areas: " khkjhkjas xjahgsdjag iowhedjask gsfdhasd"
                       " fichatecesp fichatecesp fichateceng fichateceng"
                       " descripciónesp descripciónesp descripcióneng descripcióneng"
                       "espaciofotos espaciofotos espaciofotos espaciofotos";

  grid-gap: .5rem;
  }

  body {
  font-size: 12pt;
}

.collapsible {
  background-color: transparent;
  color: peachpuff;
  cursor: help;
  padding: 18px;
  text-align: left;
  font-size: 36px;
  top: 1%;
  left: 1%;
  transform: translateX(-5%);
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;}

  #descripciónesp{
    max-width: 100%;}

  #descripcióneng{
    max-width: 100%;}

    #fichatecesp{
      padding-left: 5px;
      margin-top: 20%;
    }

    #fichateceng{
      padding-left: 5px;
      margin-top: 20%;
    }


@media (max-width: 760px){

#fichatecesp{
  padding-left: 5px;
  margin-top: 20%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  grid-area: fichatecesp;
  color: whitesmoke;
}
#fichateceng{
  padding-left: 5px;
  margin-top: 20%;
  font-size: 12pt;
  background-color: transparent;
  text-align: left;
  color: darkgrey;
  grid-area: fichateceng;
}

#categs{color: snow;
  font-size: 12pt;
  line-height: 1.5;
  text-align: center;
}

#espaciofotos{
  padding-bottom: 0;

}


 .container1{
  display:grid;
  height: 100vh;
  grid-template-columns:1fr;
  grid-template-rows:  .5fr .5fr;
  grid-template-areas:
                       "hueco"
                       "columna1"
                       "columna2"
                       "columna3"
                       "columna4"
                       "columna5"
                       "columna6"
                       "columna7"
                       "columna8"
                       "columna9"
                       "columna10"
                       "columna11"
                       "columna12"
                       "columna13"
                       "columna14"
                       "columna15"
                       "columna16"
                       "columna17"
                       "columna18"
                       "columna19";




  grid-gap: 1.5rem;
  row-gap: 3.5rem;
}

.nombre{
max-width: 50%;


body {
  font-size: 14pt;
  overflow: auto;
  text-align: left;
  font-family: sans-serif;
  font-style: normal;
  /*background-image: url("MIR-telaraña.jpg");*/
 background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
color: snow;
}

.container2{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .4fr 1fr 1fr 1fr;
    grid-template-areas:
                      "fichatecesp fichateceng"
                      "espaciofotos espaciofotos"
                      "descripciónesp descripciónesp"
                      "descripcióneng descripcióneng";
  }




}

@media (max-width: 500px){

  .content0 {
    width: 90%;
  }

  .content00 {
    width: 90%;
  }

  .collapsible2 {
    left: 70%;}

#fichatecesp{
  margin-top: 40%;
  font-size: 10pt;
  background-color: transparent;
  text-align: left;
  grid-area: fichatecesp;
  color: whitesmoke;
}
#fichateceng{
margin-top: 40%;
  font-size: 10pt;
  background-color: transparent;
  text-align: left;
  color: darkgrey;
  grid-area: fichateceng;
}

#descripciónesp{
  font-size: 10pt;}

#descripcióneng{
  font-size: 10pt;
  max-width: 75%;
  background-color: transparent;
 font-family: serif;
  color: azure;
  grid-area: descripcióneng;}


#categs{color: snow;
  font-size: 12pt;
  line-height: 1.5;
  text-align: center;
  padding-top: 0%;
  padding-right: 15%;
  padding-left: 15%;}

  #descripcióneng{
    padding-bottom: 35px;}

}